---
title: Progress
package: "@chakra-ui/progress"
image: "components/progress.svg"
description:
  Progress is used to display the progress status for a task that takes a long
  time or consists of several steps.
---

`Progress` is used to display the progress status for a task that takes a long
time or consists of several steps.

<ComponentLinks
  theme={{ componentName: "progress" }}
  github={{ package: "progress" }}
  npm={{ package: "@chakra-ui/progress" }}
/>

<carbon-ad></carbon-ad>

## Import

```js
import { Progress } from "@chakra-ui/react"
```

## Usage

```jsx
<Progress value={80} />
```

### Progress with Stripe

You can add `hasStripe` prop to any progress bar to apply a stripe via a CSS
gradient over the progress bar’s background color.

```jsx
<Progress hasStripe value={64} />
```

### Progress sizes

There are two ways you can increase the height of the progress bar:

- You can add `size` prop to increase the height of the progress bar.
- You can also use the `height` prop to manually set a height.

```jsx
<Stack spacing={5}>
  <Progress colorScheme="green" size="sm" value={20} />
  <Progress colorScheme="green" size="md" value={20} />
  <Progress colorScheme="green" size="lg" value={20} />
  <Progress colorScheme="green" height="32px" value={20} />
</Stack>
```

### Progress color scheme

You can add `colorScheme` prop to any progress bar to apply any color that
exists in the `theme`.

```jsx
<Progress value={20} size="xs" colorScheme="pink" />
```

### Animated Progress

To show an animated progress, pass the `isIndeterminate` prop.

```jsx
<Progress size="xs" isIndeterminate />
```

## Accessibility

- `Progress` has a `role` set to `progressbar` to denote that it is a progress.
- `Progress` has `aria-valuenow` set to the percentage completion value passed
  to the component, to ensure the progress percent is visible to screen readers.

## Props

<PropsTable of="Progress" />
